<script setup lang="ts">
import { ref } from 'vue';
import { useInventory } from '../../../../composables';
import { rarityTextColorClass } from '../../../../utils';
import type { TempSlot } from '../../../../game/model/inventory/type';
import { EVENTS, GameKernel } from '../../../../game';
import PageContainer from '../../components/page.vue';

const { state: inventoryState } = useInventory();

const open = ref(false);

function show() {
  open.value = true;
}

function close() {
  open.value = false;
}

function onExtractClick(item: TempSlot) {
  GameKernel.inst.bus.emit(EVENTS.INVENTORY_TEMPORARY_EXTRACT, item);
}

defineExpose({
  show,
  close,
});
</script>

<template>
  <a-modal
    v-model:open="open"
    wrap-class-name="temp-backpack"
    :closable="false"
    :footer="null"
    :destroy-on-close="true"
  >
    <page-container title="临时背包">
      <div class="flex flex-col h-full">
        <div class="flex-1 overflow-auto flex flex-col gap-2 p-2">
          <div v-if="inventoryState.tempSlots.length">
            <a-card v-for="slots in inventoryState.tempSlots" :key="slots.id">
              <div class="flex items-center justify-between gap-2">
                <div class="flex-1 flex flex-col gap-2">
                  <div class="flex text-base">
                    <div
                      :class="
                        rarityTextColorClass(
                          slots.ins?.payload?.equip?.rarity ||
                            slots.itemConfig?.rarity
                        )
                      "
                    >
                      {{ slots.itemConfig?.name }}
                    </div>
                    <div>x{{ slots.ins.quantity }}</div>
                  </div>
                  <div class="text-xs">
                    <div>提取费用：1000 灵石</div>
                    <div>过期时间：{{ slots.expireTime }}</div>
                  </div>
                </div>
                <div class="flex-none">
                  <a-button @click="onExtractClick(slots)">提取</a-button>
                </div>
              </div>
            </a-card>
          </div>
          <a-card v-else>
            <div class="text-center">空空如也</div>
          </a-card>
        </div>
        <div
          class="flex-none flex justify-end p-2 border-0 border-t border-solid border-border"
        >
          <a-button @click="close">关闭</a-button>
        </div>
      </div>
    </page-container>
  </a-modal>
</template>

<style>
.temp-backpack .ant-modal {
  width: 100vw;
  top: 0;
  padding-bottom: 0;
  margin: 0;
}
.temp-backpack .ant-modal .ant-modal-content {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  padding: 0px;
}
.temp-backpack .ant-modal .ant-modal-body {
  flex: 1;
  overflow: auto;
}
.temp-backpack.hidden-title .ant-modal .ant-modal-header {
  display: none;
}
</style>
